<template>
    <div>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <p @click="changeStatus(index)">{{item.name}}</p>
                <treeMenus v-if="scopesDefault[index]" :list="item.clist"></treeMenus>
            </li>
        </ul>
        <!-- <childWp></childWp> -->
    </div>
</template>

<script>
export default {
  name: "treeMenus",
  props: ["list"],
  data() {
    return {
      scopesDefault: [],
      scopes: []
    };
  },
  methods: {
    changeStatus(index) {
      // console.log(index)
      if (this.scopesDefault[index] == true) {
        this.$set(this.scopesDefault, index, false);
      } else {
        //  console.log(2)
        this.$set(this.scopesDefault, index, this.scopes[index]);
      }
    },
    scope() {
        // console.log(this.list)
       this.list.forEach((item,index) => {
        //  console.log(item)
           this.scopesDefault[index] =false
          if('clist' in item){
               this.scopes[index] = true
                console.log(item, index)
          }else{
              this.scopes[index] = false
          }
       });
      // this.list.forEach((item, index) => {
      //   this.scopesDefault[index] = false;
      //   if ("cList" in item) {
      //     this.scopes[index] = true;
      //     console.log(item, index);
      //   } else {
      //     this.scopes[index] = false;
      //   }
      // });
    }
  },
  created() {
    this.scope();
  }
};
</script>

<style scoped>
ul li {
  list-style: none;
}
</style>